<script setup lang="ts">
import { ref } from "vue";
const score = ref(0)
const isShow = ref(false)
const changeShow = () => { 
    isShow.value = !isShow.value
}
</script>
<template>
    <div>
        <div>功德：{{ score }}</div>
        <!-- v-on:事件名 可以简写成 @事件名 -->
        <button v-on:click="score++">+1</button>
        <!-- hr 是分割线 -->
        <hr>
        <button @click="changeShow">显示/隐藏</button>
        <button v-on:click="isShow.value = !isShow.value"></button>
        <div class="box" v-show="isShow"></div>
    </div>
  
</template>
<style>
    .box{
        background-color: #27152b;
        width: 200px;
        height: 100px;
    }
</style>

